import React, { useEffect, useState } from 'react';
import { WdDiseaseItem, WdHeader } from '../../../components';
import { useBoolean, useRequest, useSetState } from 'ahooks';
import { getDiseaseTitle, getDrugTitle } from '../../../api/home';
import { DiseaseTitleState, DrugTitleState } from '../../home/knows';
import url from '../../../assets/images/icon/common resource/hdpi/common_icon_search_n.png'
import style from './style.module.scss';
import { getDiseaseList } from '../../../api/disease';
import { DiseaseItemState } from '../../../types';
import { List } from 'react-vant';
const Index: React.FC = () => {
  // 标题
  const { data: titles = [] } = useRequest(async () => {
    const resp = await getDiseaseTitle();
    setListParams({ departmentId: resp.data.result[0].id })
    return resp.data.result as DiseaseTitleState[]
  })
  // 列表参数
  const [listParams, setListParams] = useSetState({ count: 10, page: 1, departmentId: -1 })
  const [list, setList] = useState<DiseaseItemState[]>([]);
  const getList = async () => {
    const resp = await getDiseaseList(listParams);
    if (listParams.page === 1) {
      setList(resp.data.result)
    } else {
      setList([...list, ...resp.data.result])
    }

    resp.data.result.length ? setFalse() : setTrue()

  }
  // 是否还有更多数据状态
  const [finished, { setTrue, setFalse }] = useBoolean(false)
  useEffect(() => {
    listParams.departmentId !== -1 && getList()
  }, [listParams])
  return (
    <div>
      <WdHeader mode="black"></WdHeader>
      {/* 横滚 */}
      <div className={style.menu}>
        <div className={style.scroll_x}>
          {
            titles.map(v => {
              return <span className={[style.item, v.id === listParams.departmentId ? style.active : ''].join(' ')} key={v.id} onClick={() => {
                setListParams({ departmentId: v.id, page: 1 });
                setFalse()
              }}>{v.departmentName}</span>
            })
          }
        </div>
        <span className={style.span}>|</span>
        <img src={url} alt="" className={style.img} />
      </div>
      {/* 列表 */}
      <List onLoad={async () => {
        setListParams({ page: listParams.page + 1 })
      }} finished={finished} finishedText="没有更多数据了！！">
        {
          list.map(v => {
            return <WdDiseaseItem key={v.sickCircleId} item={v}></WdDiseaseItem>
          })
        }
      </List>
    </div>
  )
}


export default Index